<template>

	<view class="container backgroundClass" :class="skinStyle">
		<!-- <scroll-view scroll-y style="width: 100%; height: 100vh;"> -->
		<!--banner-->
		<view class="tui-banner-swiper">
			<!-- #ifdef MP-WEIXIN || H5 -->
			<swiper :indicator-dots="true" indicator-color="#fff" indicator-active-color="#E96D71" :autoplay="false " :interval="5000"
			 :duration="150" :circular="true" @change="bannerChange" class="" :style="{height:scrollH+'px'}">
				<!-- <block v-for="(item,index) in banner" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage">
						<video class="tui-slide-image" id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @error="videoErrorCallback" :autoplay='true' controls></video>
					</swiper-item>
				</block> -->
				<!-- @tap.stop="previewImage" -->
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item :data-index="index">
						<image v-if="index>=videoLength" lazy-load :src="imgSrc+item" class="tui-slide-image" :style="{height:scrollH+'px'}" />
						<video v-else :poster="imgSrc+banner[0]" class="tui-slide-image" :id="'myVideo'+index" :src="imgSrc+goodData.productCarouselVideoData[0].productCarouselVideoUrl"
						 :style="{height:scrollH+'px'}" :enable-progress-gesture = "false"  @error="videoErrorCallback" :autoplay='false' :show-fullscreen-btn="true"
						 show-center-play-btn controls></video>
					</swiper-item>
				</block>
			</swiper>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="product-detail-swiper"></view>
			<!-- #endif -->
			<!-- <tui-tag type="translucent" shape="circleLeft" size="small">{{bannerIndex+1}}/{{banner.length}}</tui-tag> -->
		</view>
		<!-- 预售信息 -->
		<view class="kill-area" v-if="goodData.preSaleFlag===1">
			<view class="preSaleRrice">
				<view class="preSaleRriceWord" v-if="goodData.startBuyCount">
					到手价￥<text class="bigWord">{{(goodData.productDiscountPrice*goodData.startBuyCount)|moneyFormat(goodData.productDiscountPrice*goodData.startBuyCount)||' '}}</text>
				</view>
				<view class="preSaleRriceWord" v-if="!goodData.startBuyCount">
					到手价￥<text class="bigWord">{{goodData.productDiscountPrice|moneyFormat(goodData.productDiscountPrice)||' '}}</text>
				</view>
				<view class="preSaleRriceWord" v-if="goodData.startBuyCount">
					原价<text class="noPrice">￥{{goodData.productMarketPrice*goodData.startBuyCount||' '}}</text>
				</view>
				<view class="preSaleRriceWord" v-if="!goodData.startBuyCount">
					原价<text class="noPrice">￥{{goodData.productMarketPrice||' '}}</text>
				</view>
				<view class="small-size" v-if="goodData.preSaleType!==1&&goodData.startBuyCount">
					定金￥{{(depositPrice*goodData.startBuyCount)|moneyFormat(depositPrice*goodData.startBuyCount)||' '}}
				</view>
				<view class="small-size" v-if="goodData.preSaleType!==1&&!goodData.startBuyCount">
					定金￥{{depositPrice|moneyFormat(depositPrice)||' '}}
				</view>
			</view>
			<view class="preSaleWord">
				<text class="preSaleZi">预付定金 价格优惠</text>

			</view>
			<!--<view class="right-content footbar-bg" v-if="killStatus=='1'">
				<text class="theme-color">距离开始时间</text>
				<tui-countdown :time="Number(time)" color="#fff" :colonColor="colonColor" bcolor="#fff" :width="36" :height="36" :bgcolor="countdownbgColor"></tui-countdown>
			</view>
			<view class="right-content footbar-bg" v-if="killStatus=='2'">
				<text class="theme-color killWord">秒杀已结束</text>
			</view> -->
		</view>
		<!-- 团购信息 -->
		<view class="kill-area" v-if="goodData.isGroupBuy==1">
			<view class="priceGroupBox" @tap="showPopup('group')">
				<!-- <image src="../../static/img/group.gif" mode="" class="groupImg"></image> -->
				<image src="../../static/img/group.gif" mode="" class="groupImg"></image>
			</view>
			<view class="priceGroup">
				此商品拼团价<span>{{productLevelPrice}}</span>元
			</view>

		</view>
		<!-- 商品详细信息 -->
		<view class="tui-pro-detail">
			<view class="tui-product-title">
				<view class="" style="width: 100%;">
					<view class="pro-price-wrapper" v-if="goodData.preSaleFlag!==1">
						<view class="pricebox">
							<view class="tui-pro-pricebox tui-padding">
								<view class="tui-pro-price">
									<view  v-if="goodData.productDiscountPrice||goodData.productDiscountPrice==0">￥{{goodData.productDiscountPrice||0}}</view>
								</view>
							</view>
							<view class="tui-original-price tui-gray" v-if="goodData.productDiscountPrice!==goodData.productMarketPrice">
								<text class="tui-line-through" v-if="goodData.productMarketPrice||goodData.productMarketPrice==0">￥{{goodData.productMarketPrice||0}}</text>
							</view>
						</view>
						<view class="collection">
							<!-- <view class="collection"> -->
							<view class="salesCount" v-if="goodData.preSaleFlag===0">
								累计销售 {{goodData.productSalesCount||0}}
							</view>
							<!-- <view @tap="shareShowFun()" class="iconfont iconfenxiang" style="font-size: 40rpx; margin-right: 20rpx;"></view> -->
							<!-- #ifdef APP-PLUS -->
							<view @tap="shareShowFun()" v-if="goodData" class="iconfont iconfenxiang" style="font-size: 40rpx; margin-right: 20rpx;"></view>
							<!-- #endif -->
							<!--<view @tap="shareFun" class="iconfont iconfenxiang" style="font-size: 40rpx; margin-right: 20rpx;"></view> -->
							<view v-if="goodData.preSaleFlag===0 &&collectingFlg" @tap="collectionFun" class="iconfont iconxin"></view>
							<view v-if="goodData.preSaleFlag===0 &&!collectingFlg" @tap="collectionFun" class="iconfont iconxin2 tui-icon-red"></view>
						</view>
					</view>
					<view class="pro-price-PreSale" v-if="goodData.preSaleFlag===1">
						<view class="pricebox">
							<view class=""  v-if="goodData.preSaleType!==1">
								<view class="payTime" v-if="goodData.preSaleAfterPaymentDateType===1">
								尾款支付时间：支付定金后{{goodData.preSaleAfterPaymentStartDay||0}}天后开始，<text>{{goodData.preSaleAfterPaymentEndDay||0}}天</text>{{goodData.preSaleAfterPaymentEndHour||0}}小时后结束
							</view>
							<view class="payTime" v-else>
								尾款支付时间：{{goodData.preSaleAfterPaymentFixedStartTime}}~{{goodData.preSaleAfterPaymentFixedEndTime}}
							</view>
							</view>
							
							<view class="deliverGoods" v-if="goodData.preSaleDeliveryTimeType===1">
								发货时间：付尾款后{{goodData.preSaleDeliveryTimeDay}}天{{goodData.preSaleDeliveryTimeHour}}小时内
							</view>
							<view class="deliverGoods" v-else>
								发货时间：{{goodData.preSaleDeliveryTime.split(' ')[0]}}后
							</view>
						</view>
						<view class="collection">
							<!-- <view class="collection"> -->
							<!-- #ifdef APP-PLUS -->
							<view @tap="shareShowFun()" v-if="goodData" class="iconfont iconfenxiang" style="font-size: 40rpx; margin-right: 20rpx;"></view>
							<!-- #endif -->
							<view v-if="collectingFlg" @tap="collectionFun" class="iconfont iconxin"></view>
							<view v-if="!collectingFlg" @tap="collectionFun" class="iconfont iconxin2 tui-icon-red"></view>
						</view>
					</view>
					<view class="tui-pro-titbox">
						<view class="tui-pro-title goodsNameClass">{{goodData.productName}}</view>
						<!-- <view class="tui-pro-desc">{{goodData.productDesc}}</view> -->
					</view>
					<view class="tui-pro-titbox">
						<!-- <view class="tui-pro-title">{{goodData.productName}}</view> -->
						<view class="tui-pro-desc">{{goodData.productDesc}}</view>
						<view class="salesCount" style="padding: 0;" v-if="goodData.preSaleFlag===1">
							累计销售 {{goodData.productSalesCount||0}}
						</view>
						<!-- <view class="tui-pro-desc">还是VS发v广东省第三方公司沙坑里的啥叫的撒加快了的撒娇的撒开了的</view> -->
					</view>
				</view>

			</view>
			<!-- 已选信息-->
			<view class="tui-basic-info">

			</view>
			<view class="tui-coupon-info">
				<view class="tui-list-cell" @tap="togglePopup1('bottom')">
					<view class="productDeliveryTime">服务</view>
					<view class="couponReduce" v-if="goodData.noReasonReturnFlag===0">7天退换</view>
					<view class="couponReduce" v-if="goodData.productDeliveryTime">{{goodData.productDeliveryTime}}小时内发货</view>
					<view class="couponReduce">假一赔十</view>
					<view class="tui-ml-auto">
						<view class="iconfont iconxiangyou"></view>
					</view>
				</view>
			</view>
			<view class="tui-coupon-info">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon ">关于运费</view>
				</view>
				<view class="coupinContent" style="padding-top: 0;">
					<view class="freightWord" v-if="goodData.isParcel==0">
						全国区域内，每笔订单统一<text style="color:#EA655E">{{carriagePrice}}元</text>，实际付款达<text style="color:#EA655E">{{carriageLimit}}元以上</text>，享受包邮政策
					</view>
					<view class="freightWord" v-else>
						全国包邮
					</view>
				</view>
			</view>
			<view class="tui-coupon-info" v-if="skuDivShow">
				<view class="tui-list-cell skuChoice" @tap="showPopup('')">
					<view class="couponicon ">请选择规格</view>

					<view class="tui-ml-auto">
						<view class="iconfont iconxiangyou"></view>
					</view>
				</view>
				<view class="coupinContent" @tap="showPopup('')">
					<image v-for="(item,index) in productSpecificationData" :key='index' v-if="index<=2" class="imgClass"
						 :src="imgSrc+item.productThumbnailImageUrl" mode=""></image>
					<view class="skuNum">
						共{{productSpecificationData.length||0}}种规格可选
					</view>
				</view>
			</view>
			<view class="tui-coupon-info" v-if="goodData.isGroupBuy==1&&bargainData.length>0">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon ">来拼团吧！就差你了，可直接参团</view>
					<view class="tui-ml-auto" @tap="goGroupList">
						更多<text class="iconfont iconxiangyou"></text>
					</view>
				</view>
				<view v-for="(item,index) in bargainData" :key='index'>
					<view class="groupContent" v-if="index<2">
						<view class="groupContentFlex">
							<view class="groupUser">
								<image class="imgClass" :src="item.headimgurl||'/static/img/mine_def_touxiang_3x.png'" mode=""></image>
								<view class="">
									<text>{{item.nickName ||'匿名'}}</text>
									<view class="countdownBox">
										<view class="grouoNumber">
											共{{item.memberNum}}人，剩余
										</view>
										<tui-countdown :time="tabConut(item.bargainEndDate)" color="#333" colonColor="#333" bcolor="transparent"
										 bgcolor="transparent" @end="endOfTime"></tui-countdown>
									</view>
								</view>
							</view>
							<view class="groupButton" @tap="joinGroupon(item.bargainId)">
								去参团
							</view>
						</view>
					</view>


				</view>
			</view>
			<view class="tui-coupon-info">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon ">用户评论({{goodData.evalutionSize||0}})</view>

					<!-- <view class="tui-ml-auto" @tap="goEvaluateList" > -->
					<view class="tui-ml-auto" @tap="goEvaluateList" v-if="goodData.evalutionSize>0">
						查看全部<text class="iconfont iconxiangyou"></text>
					</view>
				</view>
				<view class="evaluateContent" v-if="goodData.evalutionSize>0">
					<view class="evaluateUser">
						<image class="imgClass" :src="goodData.headimgurl||'/static/img/mine_def_touxiang_3x.png'" mode=""></image>
						<text>{{goodData.nickName ||'匿名'}}</text>
					</view>
					<view class="evaluateData">
						{{goodData.productEvaluationData.evaluationText||''}}
					</view>

				</view>
			</view>
			<!-- <scroll-view class="center-tabs-view" scroll-x="true" :scroll-left="scrollLeft">
				<block v-for="(tab,index) in tabs" :key="index">
					<view class="tabs-item-wrap" v-bind:id="'tabNum'+index" @tap="swichMenu(index)">
						<view class="tabs-item" :class="[currentTab==index ? 'tabs-item-act tui-attr-active' : '']">
							<view class="tabs-item-txt">{{tab.name}}</view>
							<view class="tabs-item-bottom"></view>
						</view>
					</view>
				</block>
			</scroll-view> -->
			<!-- 商品详情 -->
			<view class="tui-coupon-info goodsDetailClass">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon ">商品详情</view>
				</view>
				<view class="">
					<view class="tui-product-img">
						<!-- <u-parse :content="article" noData="" :className="paraseClass"></u-parse> -->
						<view class="detailsBox" v-for="(item,index) in goodData.productDetailData" :key="index">
							<image class="detailsImg" :src="imgSrc+item.productDetailImageUrl" mode="widthFix"></image>
						</view>
						<!-- <image :src="'https://www.thorui.cn/img/detail/'+(index+1)+'.jpg'" v-for="(img,index) in 20" :key="index" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
			<!-- <template v-if="currentTab==0"> -->


			<tui-nomore text="已经到最底了" :visible="true" bgcolor="#f7f7f7"></tui-nomore>
			<view class="tui-safearea-bottom"></view>
			<!-- </template> -->
			<!-- 购买须知 -->
			<!-- <template v-if="currentTab==1">
				<view class="purchase-instruction-wrapper">
					<view class="attention-title">关于价格</view>
					<view class="attention-detail">秒杀品和促销品有时效，如购买完成发生差价问题，非质量问题不属于售后范围。</view>
					<view class="attention-detail">商品展示的画线价并非原价，该价格可能是品牌价格或由供应商提供的正品零售价，该价格仅供参考。</view>
					<view class="attention-title">关于退换货</view>
					<view class="attention-detail">由于生鲜商品的特殊性，生鲜类、水果蔬菜等商品非质量问题；或由于认为原因（包括订单下错地址、无人签收、联系不上、储存不当）造成的商品异常，不支持售后，敬请谅解！</view>
					<view class="attention-detail">如生鲜商品存在质量问题，请于24小时之内（团长收货开始计时）盛情售后，请提供坏果照片、订单号信息，提供给所属团长，由团长联系客服进行解决。</view>
					<view class="attention-title">关于签收</view>
					<view class="attention-detail">为保障您的权益，请在提货时当场进行验货签收，发现问题请于24小时之内联系团长，团长联系客服后为您及时处理。逾期不予售后。</view>
				</view>
			</template> -->
		</view>
		<!-- </scroll-view> -->
		<!--底部操作栏-->
		<view class="tui-operation">
			<view class="tui-operation-left tui-col-5">
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150" @tap="jumpToHome">
					<view class="iconfont iconshouye2"></view>
					<view class="tui-operation-text tui-scale-small">首页</view>
				</view>
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150" @tap="jumpToService">
					<view class="iconfont iconkefu1"></view>
					<view class="tui-operation-text tui-scale-small">客服</view>
				</view>
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150" @tap="jumpToShopCart">
					<view class="iconfont icongouwuche2"></view>
					<view class="tui-operation-text tui-scale-small">购物车</view>
					<view class="tui-badge tui-badge-red" v-if="carCount!==0">{{carCount}}</view>
				</view>
			</view>
			<view class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4">
				<template v-if="goodData.preSaleFlag!==1">
					<template class="" v-if="groupType!==1">
						<template class="" v-if="goodData.productStatus!==50">
							<template class="" v-if="stockFlg!==0">
								<view class="tui-flex-1">
									<tui-button :size="28" type="warning" width="220rpx" height="70rpx" shape="circle" class="btn-mini"
							 @tap="showPopup('cart')">加入购物车</tui-button>
								</view>
								<view class="tui-flex-1">
									<tui-button :size="28" type="danger" width="220rpx" height="70rpx" shape="circle" class="btn-mini" @tap="showPopup('buy')">立即购买</tui-button>
								</view>
							</template>
							<template class="" v-if="stockFlg==0">
								<view class="tui-flex-1 unkill-btn noClick" >
									<view class="preSaleEndTimeBtn">
										已售罄
									</view>
								</view>
							</template>
						</template>
						<template class="" v-if="goodData.productStatus==50">
							<view class="tui-flex-1 unkill-btn noClick" >
								<view class="preSaleEndTimeBtn">
									已下架
								</view>
							</view>
						</template>
					</template>
					<template class="" v-if="groupType==1">
						<view class="tui-flex-1">
							
						</view>
						<view class="tui-flex-1 unkill-btn">
							<view class="preSaleEndTimeBtn" @tap="showPopup('group')">
								立即参团
							</view>
						</view>
					</template>

				</template>

				<template v-if="goodData.preSaleFlag===1">
					<view class="tui-flex-1 unkill-btn" v-if="goodData.preSaleDateType===2&&goodData.productStatus!==50&&stockFlg!=0" :class="{noClick:startTimeFlg||endTimeFlg}">
						<view class="preSaleEndTime" v-if="startTimeFlg">
							{{goodData.preSaleDateFixedStartTime}}开始
						</view>
						<view class="preSaleEndTime" v-else>
							{{goodData.preSaleDateFixedEndTime}}结束
						</view>
						<view class="preSaleEndTimeBtn" v-if="startTimeFlg">
							立即预购
						</view>
						<view class="preSaleEndTimeBtn" v-if="endTimeFlg">
							已结束
						</view>
						<view class="preSaleEndTimeBtn" v-if="!startTimeFlg&&!endTimeFlg"
						 @tap="showPopup('preSale')">
							立即预购
						</view>
					</view>
					<view class="tui-flex-1" v-if="goodData.preSaleDateType!==2&&goodData.productStatus!==50&&stockFlg!=0">
						<!-- <tui-button :size="28" type="warning" width="220rpx" height="70rpx" shape="circle" class="btn-mini"
						 @tap="showPopup('cart')">加入购物车</tui-button> -->
					</view>
					<view class="tui-flex-1 unkill-btn" v-if="goodData.preSaleDateType!==2&&goodData.productStatus!==50&&stockFlg!=0">
						<view class="preSaleEndTimeBtn btn-mini" @tap="showPopup('preSale')">
							立即预购
						</view>
						
					</view>
					<view class="tui-flex-1 unkill-btn noClick" v-if="goodData.productStatus!==50&&stockFlg==0">
						<view class="preSaleEndTimeBtn btn-mini" >
							已售罄
						</view>
						
					</view>
					<view class="tui-flex-1 unkill-btn noClick" v-if="goodData.productStatus==50">
						<view class="preSaleEndTimeBtn btn-mini" >
							已下架
						</view>
						
					</view>
				</template>
			</view>
		</view>
		
		<!-- </view>   :mask-click="false"-->
		<uni-popup :show="couponShow" :type="type" :custom="true" @change='unipopupFun'>
			<view class="uni-tip-box">
				<view class="uni-tip-title">服务说明 <i class="iconfont iconguanbi  couponClose" style="font-size:20px" @tap="closePopup"></i></view>
				<view class="couponContent">
					<view class="couponService" v-if="goodData.noReasonReturnFlag===0">
						<view class="iconfont iconxuanzhong tui-icon-red"></view>
						<view class="couponWord">
							<view class="couponTitle">
								七天退换
							</view>
							<view class="couponIntroduce">
								商家承诺7天无理由退换货
							</view>
						</view>
					</view>
					<view class="couponService" v-if="goodData.productDeliveryTime">
						<view class="iconfont iconxuanzhong tui-icon-red"></view>
						<view class="couponWord">
							<view class="couponTitle">
								{{goodData.productDeliveryTime}}小时内发货
							</view>
							<view class="couponIntroduce">
								购买后，商家将在{{goodData.productDeliveryTime}}小时内发货
							</view>
						</view>
					</view>
					<view class="couponService">
						<view class="iconfont iconxuanzhong tui-icon-red"></view>
						<view class="couponWord">
							<view class="couponTitle">
								假一赔十
							</view>
							<view class="couponIntroduce">
								若收到商品是假货，可获得加倍赔偿
							</view>
						</view>
					</view>
				</view>

			</view>
		</uni-popup>
		<uni-popup ref="share" :show="shareShow" :type="'bottom'" :custom="true" @change="unishareFun">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view class="uni-share-content-box" @tap="shareFun('WXSceneSession')">
						<view class="uni-share-content-image">
							<view class="iconfont iconweixin shareImg"></view>
						</view>
						<view class="uni-share-content-text">微信好友</view>
					</view>
					<view class="uni-share-content-box" @tap="shareFun('WXSenceTimeline')">
						<view class="uni-share-content-image">
							<view class="iconfont shareImg iconpengyouquan"></view>
						</view>
						<view class="uni-share-content-text">朋友圈</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel()">取消分享</view>
			</view>
		</uni-popup>
		<loading v-if="isLoading"></loading>
		<tui-modal></tui-modal>
		
	</view>
</template>

<script>
	import tuiNomore from "@/components/nomore/nomore"
	import tuiButton from "@/components/button/button"
	import mixin from "@/utils/mixin.js"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import sku from "@/packageA/components/sku/sku.vue"
	import tuiCountdown from "@/packageA/components/countdown/countdown"
	// import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [mixin],
		components: {
			// uParse,
			tuiNomore,
			tuiCountdown,
			tuiButton,
			uniPopup,
			sku
		},
		props: {
			productId: {
				type: String,
			},
			carriageLimit: {
				type: Number,
			},
			carriagePrice: {
				type: Number,
			},
			groupType: {
				type: Number,
			}
		},
		data() {
			return {
				shareShow: false,
				productLevelPrice: '', //团购价格
				isLoading: false, // 是否显示loading
				carCount: 0, // 购物车
				imgSrc: '',
				imgUrl: '',
				goodData: {},
				urlOptions: {},
				selectText: '',
				selectArr: '',
				killStatus: '',
				unKillFlag: false,
				sku: [],
				listParentIndex: 0,
				listIndex: 0,
				showKillArea: false,
				scrollLeft: 0,
				currentTab: 0,
				tabs: [{
					name: "商品详情"
				}, {
					name: "购买须知"
				}],
				tabs1: [],
				height: 64, //header高度
				top: 0, //标题图标距离顶部距离
				opcity: 0,
				productCarouselVideoData: [], // 轮播视频
				banner: [],
				video: [],
				bannerIndex: 0,
				menuShow: false,
				popupShow: false,
				value: 1,
				countdownbgColor: '#E96D71',
				trColor: '#ffffff00',
				colonColor: "#333",
				selectId: "",
				goodsSkuId: '',
				stock: 0,
				killStatusWord: '商品已结束秒杀',
				goodsSeckillId: '',
				leaderId: '',
				type: '',
				show: false,
				newLeaderData: {},
				oldLeaderData: {},
				options: '',
				couponShow: false,
				couponFlg: '1',
				categoryId: 0,
				couponRecommendId: '',
				othersCouponRecommendId: '',

				// 新加字段
				collectingFlg: true,
				skuType: '',
				data: {},
				// currentSku:{}
				// productId:'P2103040000000011',
				// productId:'P1806240000000003',
				evaluateData: [],
				skuList: [],
				productDeliveryTime: '',
				videoLength: 0,
				productPrice: 0,
				depositPrice: 0,
				skuDivShow: false,
				productDiscountPrice: '',
				bargainData: ['', '111', ';;;;;'],
				scrollH: '',
				productSpecificationData:[], // 商品+套装的规格
				stockFlg:-1,
				startTimeFlg:false,
				endTimeFlg:false
				// showLoading:true
			}
		},
		mounted() {
			console.log(8888)
			console.log(this.productId)
			this.queryGoodsDetail(this.productId);


			this.getBuyItem()
			// // #ifdef APP-PLUS
			// const subNvue = uni.getSubNVueById('swiper'); //初始化subnvue对象 'swiper'为pages.josn中注册时的唯一标识
			// subNvue.show(); //显示subnvue;更多方法请·查看官方文档
			// // #endif

			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.scrollH = res.windowWidth / 2
					}
				})
			}, 50);
		},

		watch: {
			selectId(newValue) {
				this.sku.forEach((tmp) => {
					if (tmp.goodsSkuId == newValue) {
						this.goodData.showObj = tmp;
					}
				})
			},
			showproduct(val) {
				if (val) {
					this.queryGoodsDetail(this.productId);
				}
			},
			couponShow(newValue) {
				// #ifdef APP-PLUS
				uni.$emit('skuShow', {
					skuShow: newValue,
				})
				// #endif
			},
			shareShow(newValue) {
				// #ifdef APP-PLUS
				uni.$emit('skuShow', {
					skuShow: newValue,
				})
				// #endif
			},

		},
		filters:{
			moneyFormat(num) {
				var result = parseFloat(num);
				result = Math.round(num * 100) / 100;
				var s_x = result.toString();
				var pos_decimal = s_x.indexOf('.');
				if (pos_decimal < 0) {
					pos_decimal = s_x.length;
					s_x += '.';
				}
				while (s_x.length <= pos_decimal + 2) {
					s_x += '0';
				}
				return s_x;
			},
		},
		methods: {
			joinGroupon(id) {
				uni.navigateTo({
					url: '../../../packageB/pages/groupon/otherGroupon?bargainId=' + id
				})
			},
			//下单时间 与 现在的时间差
			tabConut(date) {
				if (date) {
					let datatime = date.replace(/\-/g, "/")
					let paymentTime = 0
					var oDate2 = new Date(datatime);
					var oDate1 = new Date();
					var time = oDate2.getTime() - oDate1.getTime()
					console.log(time)
					paymentTime = Math.ceil(time / 1000);
					console.log(paymentTime)
					return paymentTime
				} else {
					return
				}

			},
			endOfTime() {
				console.log(111111)
			},
			goGroupList() {
				uni.navigateTo({
					url: './groupList?productId=' + this.productId
				})
			},
			bargain(id) {
				let param = {
					current: 1,
					pageSize: 10,
					productId: this.productId,
					bargainStatus: 0
				}
				this.$http.bargain(param).then((res) => {
					if (res.status === 0) {
						console.log(res.data);
						this.bargainData = res.data.records
					}
				})
			},
			unipopupFun(e) {
				console.log(e.show)
				this.couponShow = e.show
			},
			unishareFun(e) {
				console.log(e.show)
				this.shareShow = e.show
			},
			// //设置当前选择sku
			chooseAttr(data) {
				// this.currentSku = data;
				console.log('点击了规格')
				this.$emit('suitFlg', data)
			},
			videoErrorCallback: function(e) {
				console.log(e.target.errMsg)
			},
			// 服务说明
			togglePopup1(type) {
				this.type = type
				this.couponShow = true
			},
			closePopup() {
				this.couponShow = false
			},
			shareShowFun() {
				this.shareShow = true
			},
			cancel() {
				this.shareShow = false
			},
			//分享
			shareFun(type) {
				let inviterId=uni.getStorageSync('shareAgencyId')
				var shareHref = this.$util.shareUrl()

				// console.log(this.goodData.productName)
				console.log(this.goodData.productName)
				
				
				// #ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: type,
					type: 0,
					title: this.goodData.productName,
					href: `${shareHref}packageA/pages/goodsDetails/goodsDetails?productId=${this.productId}&inviterId=${inviterId}`,
					imageUrl: this.imgSrc + this.goodData.productThumbnailImageUrl,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				})
				// #endif

			},
			// 收藏
			collectionFun() {

				let param = {
					productId: this.productId
				}
				if (this.collectingFlg) {
					this.$http.collectionProductCreate(param).then((res) => {
						if (res.status === 0) {
							console.log(res.data);
							// this.goodData=res.data
							this.collectingFlg = !this.collectingFlg
						}
					})
				} else {
					this.$http.cancelCollection(this.productId).then((res) => {
						if (res.status === 0) {
							console.log(res.data);
							// this.goodData=res.data
							this.collectingFlg = !this.collectingFlg
						}
					})
				}
			},
			addToCart() {
				this.getBuyItem()
				this.popupShow = false
			},
			// 获取购物车数量
			getBuyItem() {
				this.$http.buyItem().then((res) => {
					if (res.status === 0) {
						console.log(res.data);
						// this.goodData=res.data
						this.carCount = res.data
					}
				})

			},
			// 跳转评价列表
			goEvaluateList() {
				uni.navigateTo({
					url: '../evaluateList/evaluateList?productId='+this.productId
				})
			},

			//获取正常商品详情
			queryGoodsDetail(id) {
				this.banner = []
				this.isLoading = true
				this.$http.productDetail(id).then((res) => {
					this.isLoading = false
					if (res.status === 0) {
						console.log(res.data);
						this.goodData = res.data
						if (res.data.productLevelPriceData) {
							this.productLevelPrice = res.data.productLevelPriceData.productLevelPrice
						}

						
						this.productSpecificationData=JSON.parse(JSON.stringify(res.data.productSpecificationData));
						
						if(res.data.suitData){
							res.data.suitData.forEach(item=>{
								this.productSpecificationData.push(item)
							})
						}
						if (this.productSpecificationData.length > 1) {
							this.skuDivShow = true
						} else {
							this.skuDivShow = false
						}
						this.stockFlg=0
						this.productSpecificationData.forEach(item=>{
							this.stockFlg+=Number(item.virtualInventory)
						})

						if (res.data.productCarouselVideoData) {
							this.videoLength = res.data.productCarouselVideoData.length
							// res.data.productCarouselVideoData.forEach((item)=>{
							// 	this.banner.push(item.productCarouselVideoUrl)
							// })
						} else {
							this.videoLength = 0
						}
						res.data.productCarouselData.forEach((item) => {
							this.banner.push(item.productCarouselImageUrl)
						})
						this.$nextTick(()=>{
							if(this.videoLength>0){
								// #ifdef APP-PLUS
								uni.$emit('banner', {
									banner: this.banner,
									videoLength: this.videoLength,
									url: res.data.productCarouselVideoData[0].productCarouselVideoUrl,
									scrollH: this.scrollH,
								})
								// #endif
							}else{
								// #ifdef APP-PLUS
								uni.$emit('banner', {
									banner: this.banner,
									videoLength: this.videoLength,
									url: '',
									scrollH: this.scrollH,
								})
								// #endif
							}
						})

						if (res.data.preSaleType === 1) { //全款预售
							this.productPrice = res.data.productDiscountPrice
							this.depositPrice = res.data.productDiscountPrice
						} else if (res.data.preSaleType === 2) { //比例预售
							if(res.data.roundNumberFlag===1){
								this.depositPrice =Math.ceil(res.data.productDiscountPrice * res.data.depositRate * 0.01);
							}else{
								this.depositPrice =(res.data.productDiscountPrice * res.data.depositRate * 0.01).toFixed(2);
							}
							this.productPrice = res.data.productDiscountPrice
							
						} else if (res.data.preSaleType === 3) { //固定预售
							this.productPrice = res.data.productDiscountPrice
							this.depositPrice = res.data.deposit
						}

						if (res.data.isCollection === 0) {
							this.collectingFlg = true
						} else {
							this.collectingFlg = false
						}
						// this.banner.push(res.data.productMainImageUrl)

						console.log(this.banner)
						// this.showLoading=false
						if (this.goodData.isGroupBuy == 1) {
							this.bargain()
						}
						if (this.groupType == 1) {
							this.showPopup('group')
						}
						this.normalStatus(this.goodData.preSaleDateFixedEndTime)
						this.tab(this.goodData.preSaleDateFixedStartTime)
						let inviterId=uni.getStorageSync('shareAgencyId')
						var shareHref = this.$util.shareUrl()
						// #ifdef H5
						this.$wechat.share({
							title: this.goodData.productName,
							desc: "",
							link: `${shareHref}packageA/pages/goodsDetails/goodsDetails?productId=${this.productId}&inviterId=${inviterId}`,
							imgUrl: this.imgSrc + this.goodData.productThumbnailImageUrl
						});
						// #endif
					}
				})
			},
			tab(date) {
				if (date) {
					var endtime = date.split(' ');
					// console.log(endtime)
					if (endtime[1] === '24:00:00') {
						endtime[1] = '23:59:59'
					}
					date = endtime.join(' ')
					let datatime = date.replace(/\-/g, "/")
					var oDate1 = new Date(datatime);
					var oDate2 = new Date();
					if (oDate1.getTime() > oDate2.getTime()) {
						this.startTimeFlg = true
					} else {
						this.startTimeFlg = false
					}
				} else {
					this.startTimeFlg = false
				}

			},

			//正常商品 判断处于什么是否上下架状态
			normalStatus(date) {
				if (date) {
					var endtime = date.split(' ');
					// console.log(endtime)
					if (endtime[1] === '24:00:00') {
						endtime[1] = '23:59:59'
					}
					var dateEnd = endtime.join(' ')
					let datatime = dateEnd.replace(/\-/g, "/")
					var oDate1 = new Date(datatime);
					var oDate2 = new Date();
					if (oDate1.getTime() < oDate2.getTime()) {
						this.endTimeFlg = true
					} else {
						this.endTimeFlg = false
					}
				} else {
					this.endTimeFlg = false
				}

			},

			jumpToHome() {
				uni.reLaunch({
					url: '../../../pages/home/home'
				})
			},
			jumpToService() {
				uni.navigateTo({
					url: "../customerService/customerService"
				})
			},
			jumpToShopCart() {
				uni.navigateTo({
					url: '../../../pages/shopcart/shopcart'
				})
			},
			//图片点击
			swichMenu: async function(current) { //点击其中一个 tab
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					this.setScrollLeft(current);
				}
			},
			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
			},
			getWidth: function(id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			bannerChange(e) {
				this.bannerIndex = e.detail.current
			},
			previewImage(e) {
				let index = e.currentTarget.dataset.index;
				uni.previewImage({
					current: this.banner[index],
					urls: this.banner
				})
			},
			showPopup(type) {
				if(this.goodData.productStatus==50||this.stockFlg==0){
					if(this.goodData.productStatus==50){
						uni.showToast({
							title: '该商品已下架',
							icon: 'none'
						});
						return
					}else if(this.stockFlg==0){
						uni.showToast({
							title: '该商品已售罄',
							icon: 'none'
						});
						return
					}
					
				}else{
					this.skuType = type
					// this.skuList= this.goodData.productSpecificationData
					this.imgUrl = this.goodData.primaryPicUrl;
					this.goodData.skuType = type;
					var goodData = JSON.parse(JSON.stringify(this.goodData));
					this.$emit('popupShowFun', goodData)
				}
			},
			hidePopup() {
				this.popupShow = false
			},
			collecting() {
				this.collected = !this.collected
			},
			common() {
				this.tui.toast("功能开发中~")
			},
			submit() {
				this.popupShow = false
				// uni.navigateTo({
				// 	url: '../submitOrder/submitOrder'
				// })
			},
		}

	}
</script>

<style lang="scss">

	.backgroundClass {
		background-color: #f7f7f7;
		// overflow: hidden;
		// overflow-y: auto;
		// height: 100vh;
	}
	.backgroundClass::-webkit-scrollbar {
	        display: none;/*隐藏滚动条*/
	}
	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
	.container {
		padding-bottom: 100rpx;
	}

	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9998;
	}

	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 99999;
	}

	.tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: 20rpx;
		top: -16rpx;
		min-width: 32rpx;
	}

	.tui-icon-ml {
		margin-left: 20rpx;
	}

	.tui-icon {
		border-radius: 16px;
	}

	// .tui-icon-back {
	// 	height: 32px !important;
	// 	width: 32px !important;
	// 	display: block !important;
	// }

	.tui-header-icon .tui-icon-more-fill {
		height: 20px !important;
		width: 20px !important;
		padding: 6px !important;
		display: block !important;
	}

	.product-detail-swiper {
		height: 372rpx !important;
	}

	.tui-translucent {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}

	.tui-slide-image {
		width: 100%;
		// height: 352rpx !important;
		display: block;
	}

	.tui-banner-swiper {
		position: relative;
	}

	.tui-banner-swiper .tui-tag-class {
		position: absolute;
		color: #fff;
		bottom: 30rpx;
		right: 0;
	}

	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/*顶部菜单*/
	.tui-menu-box {
		box-sizing: border-box;
	}

	.tui-menu-header {
		font-size: 34rpx;
		color: #fff;
		height: 32px;
		display: flex;
		align-items: center;
	}

	.tui-menu-itembox {
		color: #fff;
		padding: 40rpx 10rpx 0 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;
	}

	.tui-menu-item {
		width: 22%;
		height: 160rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		margin-right: 4%;
		margin-bottom: 4%;
	}

	.tui-menu-item:nth-of-type(4n) {
		margin-right: 0;
	}

	.tui-badge-box {
		position: relative;
	}

	.tui-badge-box .tui-badge-class {
		position: absolute;
		top: -8px;
		right: -8px;
	}

	.tui-msg-badge {
		top: -10px;
	}


	.tui-menu-text {
		padding-top: 12rpx;
	}

	.tui-opcity .tui-menu-text,
	.tui-opcity .tui-badge-box {
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
	}

	/*顶部菜单*/
	/*内容 部分*/
	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-size {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-gray {
		color: #999;
	}

	.tui-icon-red {
		color: $red;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.kill-area {
		width: 100%;
		height: 120rpx;
		color: #fff;
		position: relative;
		display: flex;
		// background-color: #E04B28;
		background-image: linear-gradient(to right, #FE0032, #FE346E);
		justify-content: space-between;
		align-items: center;

		.priceGroupBox {
			width: 100%;
			height: 120rpx;

			.groupImg {
				width: 100%;
				height: 100%;
			}
		}

		.priceGroup {
			position: absolute;
			top: 36rpx;
			left: 200rpx;
			z-index: 2;
			font-size: 32rpx;

			span {
				color: #F9EE6D;
				font-size: 38rpx;
			}
		}

		.preSaleRrice {
			margin-left: 40rpx;


			.preSaleRriceWord {
				font-size: 28rpx;

				.bigWord {
					font-size: 35rpx;
				}
			}
			.noPrice {
				text-decoration: line-through;
				// text-decoration: line-through;
			}
			.small-size {
				font-size: 24rpx;

				
			}
		}

		.left-radius-arrow {
			position: absolute;
			// width: 0;
			// height: 0;
			// transform: rotate(-45deg);
			// border-width: 38rpx;
			// border-style: solid;
			// border-top-left-radius: 20rpx;
			// position: absolue;
			// right: 180rpx;
			// top: 18rpx;
		}

		.preSaleWord {
			font-size: 40rpx;
			margin-right: 20rpx;

			text:nth-child(2) {
				margin-top: 10rpx;
				font-size: 30rpx;
			}
		}
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;

		.kill-notice {
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx 0 30rpx;
			font-size: 32rpx;
			color: $red;

			.kill-notice-left {
				font-size: 24rpx;
				border: 2rpx solid $red;
				border-radius: 12rpx;
				padding: 0 8rpx;
			}

			.kill-notice-right {
				margin-left: 12rpx;
			}
		}

		.tui-pro-titbox {
			@include multiline-text-overflow;
			font-size: 28rpx;
			font-weight: 500;
			position: relative;
			padding: 0 30rpx;
			margin-top: 10rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;


			.tui-pro-desc {
				font-size: 28rpx;
				color: #8a8a8a;
				margin-left: 5rpx;
			}
			.goodsNameClass{
				font-weight: bold;
			}
		}

		.tui-product-title {
			margin-top: 20rpx;
			background: #fff;
			padding-bottom: 20rpx;
			position: relative;
			display: flex;
			justify-content: space-between;

			// &:after {
			// 	content: '';
			// 	position: absolute;
			// 	// border-bottom: 2rpx solid $borderColor;
			// 	transform: scaleY(0.5);
			// 	bottom: 0;
			// 	right: 0;
			// 	left: 63px;
			// }

			.collection {
				margin-right: 20rpx;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 44rpx;
				}
			}
		}

		.pro-price-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;

			.pricebox {
				display: flex;
				align-items: center;
			}

			.tui-pro-pricebox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #EA655E;
				font-size: 44rpx;
				// font-weight: bold;
				line-height: 44rpx;


			}

			.tui-pro-price {
				display: flex;
				align-items: center;
			}

			.tui-original-price {
				font-size: 28rpx;
				// line-height: 26rpx;
				// padding-top: 28rpx;
				// box-sizing: border-box;
			}

			.tui-line-through {
				text-decoration: line-through;
			}

		}


		.pro-price-PreSale {
			padding: 10rpx 0 10rpx 30rpx;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;

			.payTime {
				color: #888888;
			}

			.deliverGoods {
				color: #888888;
				margin-top: 5rpx;
			}
		}

		.tui-product-img {
			// border-top: 2rpx solid transparent;
			background-color: #fff;
			// padding: 0 30rpx;

			.detailsImg {
				width: 100%;
				display: block;
			}
		}

		.purchase-instruction-wrapper {
			background-color: #fff;
			padding: 0 30rpx;
			font-size: 28rpx;

			.attention-title {
				font-weight: bold;
			}

			.attention-detail {
				color: #999;
				line-height: 1.5;
				margin-bottom: 30rpx;
				text-align: justify;
			}
		}
	}

	.salesCount {
		color: #a9a9a9;
		padding: 10rpx;
		font-size: 28rpx;
		text-align: right;
	}

	.tui-basic-info {
		background: #fff;
		border-radius: 0;
		overflow: hidden;



		.tui-list-cell {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			line-height: 26rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.tui-cell-title {
				// font-weight: bold;
				// padding-right: 30rpx;
			}

			.tui-ml-auto {
				margin-left: auto;
			}
		}
	}
	
	.tui-coupon-info {
		background: #fff;
		// border-radius: 24rpx;
		margin-top: 20rpx;
		overflow: hidden;

		.coupinContent {
			// border-top: 1px solid #f2f2f2;
			display: flex;
			align-items: center;
			margin: 0 30rpx 20rpx 30rpx;
			padding-top: 20rpx;

			.imgClass {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}

			.skuNum {
				font-size: 24rpx;
				background-color: #bdbdbd;
				border-radius: 20rpx;
				padding: 10rpx 15rpx;
			}
		}

		.groupContent {

			border-top: 1px solid #f7f7f7;
			margin: 0 30rpx 20rpx 30rpx;
			padding-top: 20rpx;

			.groupContentFlex {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.groupUser {
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.imgClass {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					border-radius: 50%;
				}

				.countdownBox {
					display: flex;
					align-items: center;

					.grouoNumber {
						margin-right: 20rpx;
					}
				}

			}

			.groupButton {
				background-image: linear-gradient(to right, #FE356C, #FC5F66);
				border-radius: 10rpx;
				padding: 5rpx 20rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.evaluateContent {
			// display: flex;
			// align-items: center;
			border-top: 1px solid #f7f7f7;
			// margin: 0 30rpx 20rpx 30rpx;
			padding: 30rpx;

			.evaluateUser {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.imgClass {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					border-radius: 50%;
				}

			}

			.evaluateData {
				padding-left: 20rpx;
				margin-top: 15rpx;
				font-size: 28rpx;
				color: #757575;
			}
		}

		.freightWord {
			color: #666;
			font-size: 28rpx;
			padding: 10rpx;
			line-height: 35rpx;
		}

		.tui-list-cell {
			width: 100%;
			position: relative;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			line-height: 26rpx;
			padding: 30rpx 30rpx;
			box-sizing: border-box;

			.couponicon {
				font-size: 32rpx;
				color: #121212;
				font-weight: bold;
			}

			.skuChoice {
				border-bottom: #ccc;
			}

			.productDeliveryTime {
				margin-right: 10rpx;
				color: #757575;
				font-size: 32rpx;
			}

			.couponReduce {
				font-size: 24rpx;
				margin-right: 20rpx;
				padding: 10rpx 15rpx;
				/* border-radius: 10rpx; */
				background-color: #FFF4F5;
				color: #EA655E;

				.iconfont {
					// color: #E94732;
					margin-right: 15rpx;
				}
			}

			.tui-ml-auto {
				margin-left: auto;
			}
		}
	}
	.goodsDetailClass{
		margin-top: 0;
		background: #ffffff00;
	}

	.tui-col-7 {
		width: 65%;
	}

	.tui-col-5 {
		width: 35%;
	}

	.tui-operation {
		width: 100%;
		height: calc(100rpx +env(safe-area-inset-bottom));
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);

		&:before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			border-top: 1rpx solid #eaeef1;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}

		.tui-btn-danger {
			// background-color: #ff5000e6 !important;
			border-radius: 50rpx !important;
		}

		.tui-btn-warning {
			border-radius: 50rpx !important;
			margin-right: 16rpx;
			// background-image: linear-gradient(to right, #f9bc4f, #f77522) !important;
		}
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation-left {
		display: flex;
		align-items: center;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}

	.tui-opacity {
		opacity: 0.5;
	}

	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 100rpx;
		box-sizing: border-box;
		padding: 20rpx 20rpx 20rpx 0;
	}

	.unikill-wrapper {
		// background-image:linear-gradient(to right, #737373c7, #323232e0);
	}

	.unkill-btn {
		display: flex;
		height: 100%;
		border-radius: 50rpx;
		// justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);

		.preSaleEndTime {
			width: 50%;
			text-align: center;
			font-size: 24rpx !important;
			padding-left: 20rpx;
		}

		.preSaleEndTimeBtn {
			flex: 1;
			text-align: center;

		}
	}

	.noClick {
		background-image: linear-gradient(to right, rgba(115, 115, 115, 0.78), rgba(50, 50, 50, 0.88)) !important;
	}

	.pop-operation {
		padding: 0 20rpx !important;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-operation .tui-badge-class {
		position: absolute;
		top: -6rpx;
		/* #ifdef H5 */
		transform: translateX(50%)
			/* #endif  */
	}

	.tui-flex-1 {
		flex: 1;
		height: 66rpx;
	}

	.tui-danger {
		background-color: $red !important;
	}

	.center-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 0 4rpx #e5e5e5;
		white-space: nowrap;
		height: 90rpx;
		background: #fff;
		margin-top: 20rpx;

		.tabs-item-wrap {
			width: 50%;
			display: inline-block;
			white-space: nowrap;
			height: 100%;

			.tabs-item {
				margin-left: 25rpx;
				margin-right: 25rpx;
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.tabs-item-txt {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 28rpx;
					font-weight: 400;
					// color: #333333;
				}

				.tabs-item-bottom {
					position: absolute;
					bottom: 8rpx;
					width: 100%;
					height: 4rpx;
				}
			}
		}
	}

	.parase-content {
		color: #333;
		font-size: 28rpx;
		text-align: left;
	}

	.numWord {
		margin-left: 10rpx;
	}

	.killWord {
		font-size: 32rpx;
	}

	.uni-tip {
		padding: 15px;
		width: 300px;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.uni-tip-content {
		// padding: 15px;
		font-size: 14px;
		color: #666;
	}

	.uni-tip-div {
		margin: 20rpx 0;
		padding: 10rpx;
		border: 1rpx solid $borderColor;
		border-radius: 20rpx;
	}

	.leader-box {
		display: flex;
	}

	.leader-left {
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.lerder-tip {
			font-size: 24rpx;
			margin: 10rpx 0;
			padding: 8rpx;
			color: #FFFFFF;
			background-color: #E04B28;
			border-radius: 10rpx;
		}
	}

	.leader-right {
		flex: 1;

		.leader-name {
			font-size: 30rpx;
			padding: 4rpx;
		}

		.leader-village {
			font-size: 28rpx;
			padding: 2rpx;
			color: #a0a0a0;
		}

		.leader-but {
			font-size: 24rpx;
			margin: 10rpx 0;
			width: 100rpx;
			text-align: center;
			border: 1px solid #35B06A;
			border-radius: 10rpx;
		}
	}

	.uni-tip-button {
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}

	.rightBottom {
		position: fixed;
		bottom: calc(constant(safe-area-inset-bottom) + 190rpx); // ios底部安全距离-bottom
		bottom: calc(env(safe-area-inset-bottom) + 190rpx);
		right: 4rpx;
		z-index: 99999;

		.iconfont {
			font-size: 100rpx;
			// color: #0EA391;
		}
	}

	.tipContent {
		height: 600rpx;
		overflow-y: auto;
	}

	.overdue {
		position: absolute;
		border: 2px solid #cccccc;
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #cccccc;
		transform: rotate(30deg);
		font-size: 26rpx;
		text-align: center;
		right: 0;
	}

	.nowGet {
		color: #00BFFF;
		width: 65rpx;
		font-size: 27rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		// background-image: radial-gradient(circle at 65rpx 7px, transparent 6px, #B2B2B2 6px, #fff 8px);
		// background-position: 0 0, 65rpx 0;
		// background-repeat-x: no-repeat;
		// background-size: 65rpx 23px;
	}

	.uni-tip-title {
		// text-align: center;
		// font-weight: bold;
		font-size: 16px;
		color: #333;
		display: flex;
		justify-content: space-between;
		padding: 15rpx;
	}

	.uni-tip-box {
		padding: 15rpx;
		width: 100%;
		background: #fff;
		box-sizing: border-box;

		// border-radius: 20px 20rpx 0 0;
	}

	// .couponClose{
	// 	position: ;
	// }
	.redContainer {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 9999;
		padding: 0 20rpx;
		// margin-top: 20rpx;

		.couponBox {
			position: relative;
			background: #FFFFFF;
			// margin-top: -500rpx;
			height: 170rpx;
			width: 90%;
			// border-radius: 20rpx;
			border-top: 1px solid #B2B2B2;
			border-bottom: 1px solid #B2B2B2;
			border-right: 1px solid #B2B2B2;
			display: flex;


			.couponLeft {
				width: 200rpx;
				// border-right: 1px dashed #666666;
				text-align: center;
				padding-top: 50rpx;
				// border-radius: 17rpx 0 0 17rpx;

				.couponLeftWord {
					color: #FFFFFF;
					font-size: 36rpx;
				}

				.couponLeft-small {
					color: #FFFFFF;
					font-size: 26rpx;
				}
			}

			.couponRight {
				flex: 1;
				padding: 20rpx;

				.couponName {
					color: #525252;
					font-size: 30rpx;
					width: 300rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap
				}

				.couponType {
					color: #666666;
					font-size: 28rpx;
					padding: 10rpx 0;
				}

				.couponDate {
					color: #B2B2B2;
					font-size: 24rpx;
				}
			}
		}

	}

	.couponContent {
		width: 100%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 9999;
		padding: 20rpx;

		.couponService {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-top: 20rpx;

			.iconfont {
				// color: #E94732;
				margin-left: 60rpx;
				margin-top: 10rpx;
			}

			.couponWord {
				color: #666666;
				width: 80%;

				.couponTitle {
					color: #111;
					font-size: 32rpx;
					margin-bottom: 6rpx;
				}

				.couponIntroduce {
					font-size: 26rpx;
				}
			}

		}
	}

	/* 底部分享 */
	.uni-share {
		background: #fff;


		.uni-share-title {
			line-height: 60upx;
			font-size: 24upx;
			padding: 15upx 0;
			text-align: center;
		}

		.uni-share-content {
			display: flex;
			flex-wrap: wrap;
			padding: 15px;
		}

		.uni-share-content-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;
			box-sizing: border-box;
		}

		.uni-share-content-image {
			display: flex;
			justify-content: center;
			align-items: center;
			// width: 60upx;
			// height: 60upx;
			overflow: hidden;
			border-radius: 10upx;
		}

		.shareImg {
			color: #07C160;
			font-size: 60rpx;
		}

		.uni-share-content-image .image {
			width: 100%;
			height: 100%;
		}

		.uni-share-content-text {
			font-size: 26upx;
			color: #333;
			padding-top: 5px;
			padding-bottom: 10px;
		}

		.uni-share-btn {
			height: 90upx;
			line-height: 90upx;
			border-top: 1px #f5f5f5 solid;
			text-align: center;
			color: #666;
		}
	}
</style>
